import React, { useState, useEffect } from 'react'
import { history, connect } from 'umi';
import { Row, Col, Checkbox, Space, Radio, InputNumber, message, Button } from 'antd'
import Scheduling from './components/Scheduling'
import ScheduOffline from './components/ScheduOffline'
import FlxButton from '@/components/FlxButton'
import moment from 'moment'
import './index.less'
const AnsweringOfflineForm = (props) => {
    const { data, onChange, } = props
    const { status,
        label,
        value,
        priceType,
        maxStudent,
        price,
        integralPrice,
        priceQaAmount,
    } = data
    return <Row style={{ width: '100%', border: 'rgba(236, 236, 236, 1) 1px solid', padding: 24 }} gutter={[24, 24]}>
        <Col span={24}>
            <Checkbox onChange={(e) => {
                onChange(value, {
                    status: e.target.checked ? '1' : '0',
                    maxStudent: maxStudent ? maxStudent : 50
                })
                console.log(e)
            }} checked={status === '1'}>
                {label}
            </Checkbox>
        </Col>
        <Col span={24}>
            <div style={{ color: '#333333', fontSize: '14px' }}> 默认每排班班次最大接待量<InputNumber onChange={(e) => {
                onChange(value, {
                    maxStudent: e
                })
            }} style={{ margin: '0 12px' }} value={maxStudent === 0 ? '' : maxStudent}></InputNumber>客户</div>
        </Col>
        <Col span={24}>
            <Space align='start '>
                <div style={{ flexShrink: '0' }}>  是否付费：</div>
                <div>
                    <Row gutter={[12, 12]}>
                        <Col span={24}>
                            <Radio.Group onChange={(e) => {
                                onChange(value, {
                                    priceType: e.target.value
                                })
                            }} value={priceType}>
                                <Radio value={'free'}>免费</Radio>
                                <Radio value={'money'}>付费</Radio>
                            </Radio.Group>
                        </Col>
                        {priceType === 'money' ? <>
                            <Col span={24}>
                                <div style={{ color: '#333333', fontSize: '14px' }}> 支付<InputNumber onChange={(e) => {
                                    onChange(value, {
                                        price: e
                                    })
                                }} style={{ margin: '0 12px' }} value={price === 0 ? '' : price}></InputNumber>元</div>
                            </Col>
                            <Col span={24}>
                                <div style={{ color: '#333333', fontSize: '14px' }}> 支付<InputNumber
                                    onChange={(e) => {
                                        onChange(value, {
                                            integralPrice: e
                                        })
                                    }}
                                    style={{ margin: '0 12px' }} value={integralPrice === 0 ? '' : integralPrice}></InputNumber>答疑积分</div>
                            </Col>
                            <Col span={24}>
                                <div style={{ color: '#333333', fontSize: '14px' }}> 消耗<InputNumber
                                    onChange={(e) => {
                                        onChange(value, {
                                            priceQaAmount: e
                                        })
                                    }}
                                    style={{ margin: '0 12px' }} value={priceQaAmount === 0 ? '' : priceQaAmount}></InputNumber>答疑次数</div>
                            </Col>
                        </> : null}
                    </Row>
                </div>
            </Space>
        </Col>
    </Row >
}
const AnsweringOnlineForm = (props) => {
    const { data, onChange, } = props
    const {
        status,
        label,
        value,
        maxStudent,
        followPrice,
        followIntegralPrice,
        followPriceQaAmount,
        followAskAmount,
        priceType,
        price,
        integralPrice,
        priceQaAmount,
        followStatus,
        askAmount
    } = data
    return <Row style={{ width: '100%', border: 'rgba(236, 236, 236, 1) 1px solid', padding: 24 }} gutter={[24, 24]}>
        <Col span={24}>
            <Checkbox onChange={(e) => {
                onChange(value, {
                    status: e.target.checked ? '1' : '0',
                    maxStudent: maxStudent ? maxStudent : 50
                })
                console.log(e)
            }} checked={status === '1'}>
                {label}
            </Checkbox>
        </Col>
        <Col span={24}>
            <div style={{ color: '#333333', fontSize: '14px' }}> 默认每排班班次最大接待量<InputNumber onChange={(e) => {
                onChange(value, {
                    maxStudent: e
                })
            }} style={{ margin: '0 12px' }} value={maxStudent === 0 ? '' : maxStudent}></InputNumber>客户</div>
        </Col>
        {value !== 'subject' && <>
            <Col span={24}>
                <Space align='start '>
                    <div style={{ flexShrink: '0' }}>  是否付费：</div>
                    <div>

                        <Row gutter={[12, 12]}>
                            <Col span={24}>
                                <Radio.Group onChange={(e) => {
                                    onChange(value, {
                                        priceType: e.target.value
                                    })
                                }} value={priceType}>
                                    <Radio value={'free'}>免费</Radio>
                                    <Radio value={'money'}>付费</Radio>
                                </Radio.Group>
                            </Col>
                            {priceType === 'money' ? <>
                                <Col span={24}>
                                    <div style={{ color: '#333333', fontSize: '14px' }}> 支付<InputNumber onChange={(e) => {
                                        onChange(value, {
                                            price: e
                                        })
                                    }} style={{ margin: '0 12px' }} value={price === 0 ? '' : price}></InputNumber>元</div>
                                </Col>
                                <Col span={24}>
                                    <div style={{ color: '#333333', fontSize: '14px' }}> 支付<InputNumber
                                        onChange={(e) => {
                                            onChange(value, {
                                                integralPrice: e
                                            })
                                        }}
                                        style={{ margin: '0 12px' }} value={integralPrice === 0 ? '' : integralPrice}></InputNumber>答疑积分</div>
                                </Col>
                                <Col span={24}>
                                    <div style={{ color: '#333333', fontSize: '14px' }}> 消耗<InputNumber
                                        onChange={(e) => {
                                            onChange(value, {
                                                priceQaAmount: e
                                            })
                                        }}
                                        style={{ margin: '0 12px' }} value={priceQaAmount === 0 ? '' : priceQaAmount}></InputNumber>答疑次数</div>
                                </Col>
                                <Col span={24}>
                                    <div style={{ color: '#333333', fontSize: '14px' }}> 追问<InputNumber
                                        onChange={(e) => {
                                            onChange(value, {
                                                askAmount: e
                                            })
                                        }}
                                        style={{ margin: '0 12px' }} value={askAmount === 0 ? '' : askAmount}></InputNumber>次</div>
                                </Col>
                            </> : <Col span={24}>
                                <div style={{ color: '#333333', fontSize: '14px' }}> 追问<InputNumber
                                    onChange={(e) => {
                                        onChange(value, {
                                            askAmount: e
                                        })
                                    }}
                                    style={{ margin: '0 12px' }} value={askAmount === 0 ? '' : askAmount}></InputNumber>次</div>
                            </Col>}

                        </Row>
                    </div>
                </Space>
            </Col>
            <Col span={24}>
                <Space align='start '>
                    <div style={{ flexShrink: '0' }}>  达到追问数量后是否允许继续追问：</div>
                    <div>

                        <Row gutter={[12, 12]}>
                            <Col span={24}>
                                <Radio.Group onChange={(e) => {
                                    onChange(value, {
                                        followStatus: e.target.value
                                    })
                                }} value={followStatus}>
                                    <Radio value={'0'}>不允许</Radio>
                                    <Radio value={'1'}>允许</Radio>
                                </Radio.Group>
                            </Col>


                        </Row>
                    </div>
                </Space>

            </Col>
            {followStatus === '1' ? <>
                <Col span={24}>
                    <div style={{ color: '#333333', fontSize: '14px' }}> 支付<InputNumber onChange={(e) => {
                        onChange(value, {
                            followPrice: e
                        })
                    }} style={{ margin: '0 12px' }} value={followPrice === 0 ? '' : followPrice}></InputNumber>追问价格（元）</div>
                </Col>
                <Col span={24}>
                    <div style={{ color: '#333333', fontSize: '14px' }}> 支付<InputNumber
                        onChange={(e) => {
                            onChange(value, {
                                followIntegralPrice: e
                            })
                        }}
                        style={{ margin: '0 12px' }} value={followIntegralPrice === 0 ? '' : followIntegralPrice}></InputNumber>追问积分</div>
                </Col>
                <Col span={24}>
                    <div style={{ color: '#333333', fontSize: '14px' }}> 消耗<InputNumber
                        onChange={(e) => {
                            onChange(value, {
                                followPriceQaAmount: e
                            })
                        }}
                        style={{ margin: '0 12px' }} value={followPriceQaAmount === 0 ? '' : followPriceQaAmount}></InputNumber>追问答疑次数</div>
                </Col>
                <Col span={24}>
                    <div style={{ color: '#333333', fontSize: '14px' }}> 追问<InputNumber
                        onChange={(e) => {
                            onChange(value, {
                                followAskAmount: e
                            })
                        }}
                        style={{ margin: '0 12px' }} value={followAskAmount === 0 ? '' : followAskAmount}></InputNumber>次</div>
                </Col>

            </> : null}
        </>}


    </Row >
}
const AnsweringAccountSetting = (props) => {
    const { data = {}, dispatch, teacherId, fetchData } = props
    const { teacher = {}, teacherTeachingModeConfigList = [] } = data
    const qaTypeList = [{
        value: 'online',
        label: '线上答疑',
    },
    ]
    const offlineStatus = ['offline',]
    const [visible, setVisible] = useState(false)
    const [visible1, setVisible1] = useState(false)
    const [list, setList] = useState([])
    const [defaultScheduleList, setDefaultList] = useState([])
    const formOnlineProps = {
        priceType: 'free',
        followPriceType: 'free',
        followStatus: '0',
        teacherId: teacherId
    }
    const formOfflineProps = {

        priceType: 'free',
        teacherId: teacherId
    }
    const onChange = (type, data = {}) => {
        setList(list.map(val => {
            if (val.value === type) {
                return {
                    ...val,
                    ...data
                }
            }
            return val
        }))
    }
    useEffect(() => {
        dispatch({
            type: 'answering/fetchListSchedule',
            callback: (e) => {
                setDefaultList(e)
            }
        })
    }, [])
    useEffect(() => {
        setList(qaTypeList.map(val => {
            const { value } = val
            const qaData = teacherTeachingModeConfigList.reduce((item, key) => {
                if (item) {
                    return item
                } else if (key.teachingMode === val.value) {
                    return {
                        ...key,
                        ...val,
                        offlineStatus: offlineStatus.includes(value) ? '1' : '0'
                    }
                }
            }, null)
            if (qaData) {
                return qaData
            }
            else {
                return {
                    ...val,
                    ...offlineStatus.includes(value) === '0' ? formOnlineProps : formOfflineProps,
                    teachingMode: val.value,
                    offlineStatus: offlineStatus.includes(value) ? '1' : '0',

                }
            }
        }))
    }, [teacherTeachingModeConfigList.length])

    const validateForm = () => {
        let isValid = true;
        return isValid;
    };
    const handleSubmit = () => {
        if (!validateForm()) return;
        // 通过校验后的提交逻辑...
        dispatch({
            type: 'answering/fakeSaveTeacherQaConfig',
            payload: { teacherTeachingModeConfigList: list },
            callback: () => {
                fetchData()
            }
        })
    };
    const openTeacherSchedule = (teachingMode, status) => {
        dispatch({
            type: 'answering/fetchListTeacherSchedule',
            payload: {
                teacherId: teacherId,
                teachingModes: teachingMode,
                page: 1,
                limit: 9999
            },
            callback: (e = []) => {
                const newList = e.map(val => {
                    let { weekDays, fullAddress, startDate, endDate, campusId, classroomId, scheduleTimes = '', teacherIds, excludeDates = '', id } = val
                    scheduleTimes = scheduleTimes.length > 0 ? JSON.parse(scheduleTimes) : []
                    const schedList = scheduleTimes.reduce((o, vals,) => {
                        const { scheduleType } = vals
                        if (scheduleType === 'schedule') {
                            return [...o, vals]
                        }
                        else {
                            return o
                        }
                    }, [])
                    const scheduleTimesList = scheduleTimes.reduce((o, vals,) => {
                        const { scheduleType, startTime, endTime, maxStudentAmount } = vals
                        if (scheduleType !== 'schedule') {
                            return [...o, {
                                maxStudentAmount,
                                dateTime: [moment(startTime, 'HH:mm'), moment(endTime, 'HH:mm')]
                            }]
                        }
                        else {
                            return o
                        }
                    }, [])
                    const data = defaultScheduleList.reduce((item, vals, index) => {
                        const database = {}
                        schedList.forEach(c => {
                            if (c.scheduleId === vals.id) {
                                database['schedule' + index] = true
                                database['scheduleCount' + index] = c.maxStudentAmount
                            }
                        })
                        return {
                            ...item, ...database
                        }
                    }, {})
                    return {
                        dateTime: [moment(startDate, 'YYYY-MM-DD'), moment(endDate, 'YYYY-MM-DD')],
                        campusId,
                        classroomId,
                        teacherIds,
                        excludeDates: excludeDates.length > 0 ? excludeDates.split(',') : [],
                        weekDays: weekDays.length > 0 ? weekDays.split(',') : '',
                        id,
                        ...data,
                        scheduleTimes: scheduleTimesList,
                        fullAddress
                    }



                })
                if (status === '1') {
                    setVisible1({
                        show: true,
                        detail: {
                            teachingMode,
                            teacherScheduleList: e.length > 0 ? newList : [{
                                weekDays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                            }]
                        }
                    })

                }
                else {
                    setVisible({
                        show: true,
                        detail: {
                            teachingMode,
                            teacherScheduleList: e.length > 0 ? newList : [{
                                weekDays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                            }]
                        }
                    })
                }

            }
        })
    }
    return <Row style={{ width: '100%', padding: '24px 48px' }} gutter={[24, 24]}>
        {list.map((item, index) => {
            if (item.offlineStatus === '1') {
                return <div style={{ position: 'relative', width: '100%', }}>
                    <Button onClick={() => {
                        openTeacherSchedule(item.value, item.offlineStatus, item.maxStudent)
                    }} style={{
                        position: 'absolute',
                        right: 24,
                        top: 24,
                        zIndex: 1
                    }} type='primary'>
                        排班
                    </Button>
                    <AnsweringOfflineForm onChange={onChange} key={index} data={item}></AnsweringOfflineForm>
                </div>
            }
            return <div style={{ position: 'relative', width: '100%', }}>
                <Button
                    onClick={() => {
                        openTeacherSchedule(item.value, item.offlineStatus)
                    }}
                    style={{
                        position: 'absolute',
                        right: 24,
                        top: 24,
                        zIndex: 1
                    }} type='primary'>
                    排班
                </Button>
                <AnsweringOnlineForm onChange={onChange} key={index} data={item}></AnsweringOnlineForm>
            </div>
        })}
        <FlxButton type={'primary'} onOk={() => {
            handleSubmit()
        }}></FlxButton>
        <Scheduling teacherId={teacherId} visible={visible} onClose={() => { setVisible(false) }}></Scheduling>
        <ScheduOffline teacherId={teacherId} visible={visible1} onClose={() => { setVisible1(false) }}></ScheduOffline>
    </Row>
}
export default connect(({ loading }) => ({
    loading
}))(AnsweringAccountSetting)
